

import 'dart:math';

import 'package:baby/Entities/DataContext.dart';
import 'package:baby/Entities/Store/CartItem.dart';
import 'package:baby/Entities/Store/Product.dart';
import 'package:baby/StateManagement/ModelProvider.dart';
import 'package:baby/UI/Pages/StorePage/CartPage.dart';
import 'package:baby/UI/Widgets/NumberInput.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class ProductViewer extends StatefulWidget {
  final Product product;

  const ProductViewer({Key key, @required this.product}) : super(key: key);
  @override State createState() => _ProductViewerState();
}

class _ProductViewerState extends State<ProductViewer> with SingleTickerProviderStateMixin {
  var _countNotifier = ValueNotifier(1.0);

  @override
  void initState() {
    super.initState();
  }

  @override Widget build (BuildContext context){

//    var primaryColor = Theme.of(context).primaryColor;

    Widget myWidget = Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        title: Text(widget.product.name.ug,),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.shopping_cart, color: Colors.white,),
            onPressed: () async {
              await Navigator.of(context).push(MaterialPageRoute(builder: (context) => CartPage()));
            },
          ),
        ],
      ),
      body: Padding(
        padding: EdgeInsets.all(20.0),
        child: ListView(
          children: <Widget>[
            SizedBox(
              height: 100.0,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  ClipRRect(
                      borderRadius: BorderRadius.circular(20.0),
                      child: Hero(
                          tag: widget.product.guid,
                          child: AspectRatio(
                            aspectRatio: 1.0,
                            child: CachedNetworkImage(imageUrl: widget.product.coverImage, fit: BoxFit.cover),
                          )
                      )
                  ),
                  SizedBox(width: 20.0,),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(widget.product.name.ug, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22.0),),
                        Text(widget.product.tag),
                        Spacer(),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            InkWell(
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(50.0),
                                child: Container(
                                    width: 80.0,
                                    height: 30.0,
                                    color: Theme.of(context).primaryColor,
                                    padding: EdgeInsets.all(3.0),
                                    alignment: Alignment(0.0, 0.0),
                                    child: Text("${widget.product.price} ฿", style: TextStyle(color: Colors.white), textDirection: TextDirection.ltr,)
                                ),
                              ),
                              onTap: (){},
                            ),
                            InkWell(
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(50.0),
                                child: Container(
                                  width: 30.0,
                                  height: 30.0,
                                  color: Theme.of(context).primaryColor,
                                  alignment: Alignment.center,
                                  child: Icon(Icons.more_horiz, color: Colors.white,),
                                ),
                              ),
                              onTap: (){},
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 10.0, bottom: 5.0),
              child: Text("رەسىملەردىن كۆرۈنۈشلەر", style: TextStyle(fontSize: 16.0),),
            ),
            SizedBox(
              width: double.infinity,
              height: 230.0,
              child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: widget.product.images.map((image) => AspectRatio(
                    aspectRatio: 0.7,
                    child: Padding(
                      padding: EdgeInsets.all(10.0),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(15.0),
                        child: Container(
                          color: Theme.of(context).primaryColor,
                          child: CachedNetworkImage(imageUrl: image, fit: BoxFit.cover,),
                        ),
                      ),
                    )
                  )).toList()
              ),
            ),
            Row(
              children: <Widget>[
                Chip(label: Text("قىسقىچە چۈشەندۈرۈش", style: TextStyle(fontSize: 16.0, color: Colors.white),), backgroundColor: Theme.of(context).primaryColor,),
              ],
            ),
            Container(
              constraints: BoxConstraints(minHeight: 60.0),
              decoration: BoxDecoration(
                color: Colors.black.withOpacity(0.02),
                borderRadius: BorderRadius.circular(15.0)
              ),
              padding: EdgeInsets.all(10.0),
              child: Text((widget.product.description?? "") != "" ? widget.product.description : "ۋاقتىنچە چۈشەندۈرۈشى يوق."),
            ),

            if (widget.product.parameters.isNotEmpty)
              Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Chip(label: Text("قوشۇمچە پارامىتىرلىرى", style: TextStyle(fontSize: 16.0, color: Colors.white),), backgroundColor: Theme.of(context).primaryColor,),
                    ],
                  ),
                  Container(
                    constraints: BoxConstraints(minHeight: 60.0),
                    decoration: BoxDecoration(
                        color: Colors.black.withOpacity(0.02),
                        borderRadius: BorderRadius.circular(15.0)
                    ),
                    padding: EdgeInsets.all(10.0),
                    child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: widget.product.parameters.entries.map((entry) => Row(
                          children: <Widget>[
                            Expanded(flex: 1, child: Text(entry.key),),
                            Text(" : "),
                            Expanded(flex: 1, child: Text(entry.value, textAlign: TextAlign.end,),)
                          ],
                        )).toList()
                    ),
                  )
                ],
              ),
            SizedBox(height: 80.0,),
          ],
        ),
      ),
      floatingActionButton: ModelDescendant<DataContext>(
        onChanged: (context, _, data) => FloatingActionButton(
          child: Icon(Icons.add_shopping_cart),
          onPressed: () {
            var style = Theme.of(context).textTheme.body2;


            showModalBottomSheet(context: context, builder: (context) => BottomSheet(
              builder: (context) => _buildBottomSheet(context, data),
              enableDrag: false,
              onClosing: () {},
            ));
//            data.productsOfCart.add(CartItem());
          },
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
    myWidget = Directionality(
      textDirection: TextDirection.rtl,
      child: myWidget,
    );
    return myWidget;
  }

  Widget _buildBottomSheet(BuildContext context, DataContext dataContext){
    var primaryColor = Theme.of(context).primaryColor;
    var buttonWidth = 180.0;

    Widget sheet = AnimatedBuilder(
      animation: _countNotifier,
      builder: (context, _) => Container(
        padding: EdgeInsets.symmetric(vertical: 20.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              padding: EdgeInsets.symmetric(vertical: 15.0),
              width: 260.0,
              decoration: BoxDecoration(
                color: Colors.black.withOpacity(0.05),
                borderRadius: BorderRadius.circular(15.0),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
//                          ClipRRect(
//                            borderRadius: BorderRadius.circular(15.0),
//                            child: CachedNetworkImage(imageUrl: widget.product.coverImage, fit: BoxFit.cover, width: 60.0, height: 60.0,),
//                          ),
                  Text(widget.product.name.ug, style: TextStyle(color: Theme.of(context).primaryColor, fontSize: 18.0, fontWeight: FontWeight.bold),),
                  Text("${_countNotifier.value} x ${widget.product.price} = ${widget.product.price * _countNotifier.value}฿", textDirection: TextDirection.ltr,),
                  SizedBox(height: 10.0,),
                  SizedBox(
                    width: buttonWidth,
                    height: 40.0,
                    child: NumberInput(
                      axis: Axis.horizontal,
                      value: _countNotifier.value,
                      maxValue: 20.0,
                      minValue: 1.0,
                      onNumber: (double value) {
                        _countNotifier.value = value;
                      },
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 5.0,),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.favorite, color: primaryColor,),
                  onPressed: (){},
                ),
                SizedBox(
                  width: buttonWidth,
                  height: 40.0,
                  child: FlatButton(
                    color: primaryColor,
                    child: Text("قوشۇش", style: TextStyle(color: Colors.white)),
                    shape: RoundedRectangleBorder(
                        /*borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(40.0),
                          bottomRight: Radius.circular(40.0),
                          topRight: Radius.circular(5.0),
                          topLeft: Radius.circular(5.0),
                        )*/
                        borderRadius: BorderRadius.circular(20.0)
                    ),
                    onPressed: () async {

                      dataContext.addToCart(CartItem(
                          product: widget.product,
                          count: _countNotifier.value
                      ));

                      await Navigator.of(context).pop();
                    },
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.share, color: primaryColor,),
                  onPressed: (){
                    
                  },
                ),
              ],
            )
          ],
        ),
      ),
    );
    sheet = Directionality(
      textDirection: TextDirection.rtl,
      child: sheet,
    );

    return sheet;
  }
}


